<template>
  <div class="modal-form-container">
    <vuescroll :ops="ops">
      <Form class="mr10 ml10" ref="info" :model="data" :label-width="150" :rules="rules">
        <FormItem :label="$t('xz5AFl8ygS2V-v13rJdPJ')" prop="name">
          <Input v-model="data.name" />
        </FormItem>
        <FormItem :label="$t('4wFt6b12AOS1v2rs7C92e')" prop="tel">
          <Input v-model="data.tel" />
        </FormItem>
        <FormItem :label="$t('FDVxJH8SR_vtTvfu8Ruye')" prop="cardidmultusecount">
          <Input v-model="data.cardidmultusecount" />
        </FormItem>
        <FormItem :label="$t('EgNUmuiLDgBDM2rcvUsOK')" prop="enablemultuse">
          <RadioGroup v-model="data.enablemultuse">
            <Radio label="1">{{$t('zFRyX547sJPpZO1qVxObd')}}</Radio>
            <Radio label="0">{{$t('DTnYF9bJ1CsufKT5yd_9X')}}</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem :label="$t('ude6YP0z60dYe5BVBevuj') + '(%)'" prop="vipdiscount">
          <Input v-model="data.vipdiscount" />
        </FormItem>
        <FormItem :label="$t('R50mHX0LambJk39x8cmq6')">
          <Input
            v-model="data.memo"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 5 }"
          />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="save">{{$t('q-FETLOZVSMbWnrNq0vj6')}}</Button>
          <Button style="margin-left: 8px" @click="close">{{$t('2LFpg56tAgKyBB40xpv5l')}}</Button>
        </FormItem>
      </Form>
    </vuescroll>
  </div>
</template>

<script>
import vuescroll from 'vuescroll'
import { addCustomer, updateCustomer } from '@/api/data2'

export default {
  name: 'custom_form_info',
  components: {
    vuescroll
  },
  props: {
    data: Object,
    status: String
  },
  data () {
    return {
      ops: {
        scrollPanel: {
          maxHeight: 500
        }
      },
      rules: {
        name: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        tel: [
          { required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' },
          {
            required: true,
            message: this.$t('90Cc1VMNr19_iHZ-lgqkY'),
            trigger: 'blur',
            validator: (rule, value) => {
              // 限定为数字，加减号，空格，逗号就可以了，不一定就一个号
              const reg = /[0-9,+\-\s]/
              const list = value.split('')
              let flag = true
              _.forEach(list, l => {
                flag = reg.test(l)
                return flag
              })
              return flag
            }
          }
        ],
        cardidmultusecount: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        enablemultuse: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }],
        vipdiscount: [{ required: true, message: this.$t('wXotjLC-TbA_OTLM9dES4'), trigger: 'blur' }]
      }
    }
  },
  methods: {
    close () {
      this.$emit('close')
    },
    transform () {
      return Object.assign({}, this.data, {
        cardidmultusecount: +this.data.cardidmultusecount,
        enablemultuse: +this.data.enablemultuse,
        vipdiscount: +this.data.vipdiscount
      })
    },
    async save () {
      this.$refs.info.validate(async valid => {
        if (valid) {
          const data = this.transform()
          const { code, desc } =
            this.status === 'new'
              ? await addCustomer({ ...data })
              : await updateCustomer({ ...data })
          if (code == 200) {
            this.$emit('success', desc)
          } else {
            this.$emit('fail', desc)
          }
        }
      })
    }
  }
}
</script>
